<template>
    <el-card class="box-card" shadow="never">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
            <el-button @click="handleAdd" type="primary" size="medium" icon="el-icon-plus">新增</el-button>
            <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
               <a-menu slot="overlay">
                 <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
               </a-menu>
               <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
             </a-dropdown> -->
        </div>
        <el-table :data="tableData" style="width: 100%" border :header-cell-style="headerCellStyle" v-loading="loading"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
            <div v-for="(v,i) in columns" :key="i">
                <el-table-column :fixed="v.fixed" :prop="v.dataIndex" :label="v.title" :width="v.width" show-overflow-tooltip :align="v.align"
                    v-if="v.scopedSlots ===`cont`">
                    <template slot-scope="scope">
                        {{(scope.row[v.dataIndex].replace(/<\/?.+?>/g,""))}}
                    </template>
                </el-table-column>
                <el-table-column :fixed="v.fixed" :prop="v.dataIndex" :label="v.title" :width="v.width" show-overflow-tooltip :align="v.align"
                    v-else-if="v.scopedSlots ===`display`">
                    <template slot-scope="scope">
                        <span v-if="!scope.row[v.dataIndex]" style="font-size: 12px;font-style: italic;">无图片</span>
                          <el-image v-else
                            style="width: 80px; height: 25px"
                            :src="scope.row[v.dataIndex]"
                            :preview-src-list="[scope.row[v.dataIndex]]">
                          </el-image>
                    </template>
                </el-table-column>
                <el-table-column :fixed="v.fixed" :prop="v.dataIndex" :label="v.title" :width="v.width" show-overflow-tooltip :align="v.align"
                    v-else-if="!v.scopedSlots">
                    <template slot-scope="scope">
                        {{scope.row[v.dataIndex]}}
                    </template>
                </el-table-column>
                <el-table-column :fixed="v.fixed" :label="v.title" :width="v.width" :align="v.align" show-overflow-tooltip v-else-if="v.scopedSlots === `action`">
                    <template slot-scope="scope">
                        <a @click="handleEdit(scope.row)">编辑</a>
                        <el-divider direction="vertical" />
                        <el-dropdown>
                            <a class="el-dropdown-link">
                                更多<i class="el-icon-arrow-down el-icon--right"></i>
                            </a>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item><a @click="handleDetail(scope.row)">详情</a></el-dropdown-item>
                                <el-dropdown-item>
                                    <el-popconfirm title="确定删除吗?" @confirm="() => handleDelete(scope.row.id)">
                                        <a slot="reference">删除</a>
                                    </el-popconfirm>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
                <el-table-column :fixed="v.fixed" :prop="v.dataIndex" :label="v.title" :width="v.width" :align="v.align"
                    v-else>
                    <template slot-scope="scope">
                        {{scope.row[v.dataIndex]}}
                    </template>
                </el-table-column>
            </div>

        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="ipagination.current" :page-sizes="ipagination.pageSizeOptions"
                :page-size="ipagination.pageSize" :layout="ipagination.layout" :total="ipagination.total">
            </el-pagination>
        </div>
        <OperationDialog ref="modalForm" @ok="modalFormOk" />
    </el-card>
</template>

<script>
    import {
        JeecgListMixin
    } from '@/utils/JeecgListMixin.js'
    import OperationDialog from './modules/OperationDialog.vue'
    export default {
        name: "OperationList",
        mixins: [JeecgListMixin],
        components: {
            OperationDialog
        },
        data() {
            return {
                tableData: [],
                columns: [ {
                        title: '内容',
                        dataIndex: 'cont',
                        key: 'cont',
                        align: "center",
                        scopedSlots: 'cont',
                    },
                    {
                        title: '标题',
                        dataIndex: 'title',
                        key: 'title',
                        align: "center",
                        width:300
                    },{
                        title: '封面',
                        dataIndex: 'display',
                        key: 'display',
                        align: "center",
                        width: 120,
                        scopedSlots:'display',
                    },
                    {
                        title: '操作',
                        dataIndex: 'action',
                        key: 'action',
                        align: "center",
                        fixed: "right",
                        width: 147,
                        scopedSlots:'action',
                    }
                ],
                url: {
                    list: "/information/pagelist",
                    delete: "/information/delete",
                },
            };
        },
        methods: {
        }
    }
</script>

<style scoped>
    a {
        color: #1890FF;
        cursor: pointer;
    }

</style>
